<template>
  <view class="open-area-left">
    <view v-if="type === 1" key="view-1" class="unlock-module1" :style="{ width }">
      <image src="/static/images/video/ad_popup_bg1.jpg" mode="scaleToFill" :style="{ width }" style="height: 116px; border-radius: 10px 10px 0 0"></image>
      <view class="content-box" :style="{ width }">
        <view class="title-box">
          <text class="title">恭喜您，获得免费看剧名额</text>
        </view>
        <mxp-button
          text="看广告免费解锁本集"
          radius="square"
          style="width: 100%"
          background="linear-gradient( 90deg, #FDBF00 0%, #FD6E00 100%)"
          @click="openADFun"
        ></mxp-button>
        <mxp-button style="width: 100%" text="免广告解锁" :plain="true" :cusStyle="{ marginTop: '15px' }" @click="openPayFun"></mxp-button>
        <view v-if="showountDown" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; margin-top: 15px">
          <mxp-count-down
            style="display: flex; align-items: center; justify-content: center; height: 20px; padding: 0; margin: 0; line-height: 20px"
            color="#606266"
            :cusStyle="{ lineHeight: '20px' }"
            fontSize="14px"
            :time="3 * 1000"
            format="ss"
            @finish="openADFun"
          ></mxp-count-down>
          <text style="font-size: 14px; line-height: 20px; color: #606266">秒后自动观看广告</text>
        </view>
      </view>
      <view class="close-box" hoverClass="hover" @click="openAd2Popup"><mxp-icon name="guanbi1" size="30px" color="#ffffff"></mxp-icon></view>
    </view>
    <view v-else key="view-2" class="unlock-module2">
      <image src="/static/images/video/ad_popup_bg2.png" mode="scaleToFill" style="width: 230px; height: 312px"></image>
      <view hoverClass="hover" class="butt-box" @click="openADFun">
        <text class="text">立即看广告</text>
      </view>
      <view class="close-box" hoverClass="hover" @click="hide"><mxp-icon name="guanbi1" size="30px" color="#FFFFFF"></mxp-icon></view>
      <view class="click-box">
        <image src="/static/public/ico_click.png" style="width: 67px; height: 52px" mode="scaleToFill"></image>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import MxpButton from '@/mxp-ui/mxp-button/mxp-button.vue';
  import MxpIcon from '@/mxp-ui/mxp-icon/mxp-icon.vue';
  import MxpCountDown from '@/mxp-ui/mxp-count-down/mxp-count-down.vue';
  import { useAppStore } from '@/pinia/app';
  import { userActionLog } from '@/api/datapoint';

  defineOptions({
    name: 'open-area-left',
  });

  const type = ref(1);
  const width = ref(`${Math.min(uni.upx2px(750) - 72 * 2, 230)}px`);
  const plugin = requirePlugin('playlet-plugin');
  const appStore = useAppStore();
  const showountDown = ref(false);
  onMounted(() => {
    /** 监听这个组件已经显示 */
    const param = appStore.wxAdPopupParam;
    if (param.type === 2) {
      type.value = 2;
      showountDown.value = false;
    } else {
      type.value = 1;
      showountDown.value = true;
    }
  });

  /** 得到短剧播放器实例 */
  function getPlayerManager() {
    return plugin.PlayletManager.getPageManager(appStore.wxPlayletCharge.playerId || '');
  }

  /** 再次打开支付模版 */
  function openPayFun() {
    hide();
    getPlayerManager()?.showChargeDialog();
  }

  /** 广告解锁 */
  function openADFun() {
    hide();
    handleAd();
  }

  /** 打开广告解锁2 弹出框 */
  function openAd2Popup() {
    type.value = 2;
  }

  /** 关闭 */
  function hide() {
    showountDown.value = false;
    /** 关闭 */
    getPlayerManager()?.updateOpenArea({ showLeft: false });
  }

  /**
   * 解锁
   */
  async function handleAd() {
    // 用户触发广告后，显示激励视频广告
    const ad = appStore.wxPlayletCharge?.rewardedVideoAd?.getAdInstance();
    if (ad) {
      try {
        uni.showLoading({ mask: true, title: '加载中...' });
        await ad.show();
        uni.hideLoading();
      } catch (error) {
        // 失败一次重试
        try {
          await ad.load();
          await ad?.show();
          // 最后解锁逻辑在  wx-playlet-plugin.ts 文件 中监听广告关闭事件中实现
          uni.hideLoading();
        } catch (error2) {
          uni.hideLoading();
          console.log('error====', error2);
          userActionLog({
            userId: appStore.userInfo?.userId,
            data: JSON.stringify(ad),
            eventType: 'WX_AD_OPEN',
            msg: JSON.stringify(error2),
          });
          uni.showToast({ title: '广告加载失败，BD001', icon: 'none' });
        }
        userActionLog({
          userId: appStore.userInfo?.userId,
          data: JSON.stringify(ad),
          eventType: 'WX_AD_OPEN',
          msg: JSON.stringify(error),
        });
      }
    } else {
      uni.showToast({ title: '广告加载失败，BD002', icon: 'none' });
    }
  }
</script>

<style lang="scss" scoped>
  .open-area-left {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-left: 72px;
  }

  .unlock-module1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;

    .content-box {
      position: relative;
      z-index: 2;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 20px;
      padding-top: 0;
      margin-top: -20px;
      background: #ffffff;
      border-radius: 10px;

      .title-box {
        margin-bottom: 15px;

        .title {
          font-size: 16px;
          font-weight: bold;
          color: #522700;
        }
      }
    }

    .close-box {
      padding: 4px;
      margin-top: 20px;
      border-radius: 50%;
    }

    .hover {
      opacity: 0.7;
    }
  }

  .unlock-module2 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 325px;

    .butt-box {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 180px;
      height: 43px;
      margin-top: -96px;

      .text {
        font-size: 16px;
        font-weight: bolder;
        color: #ffffff;
      }
    }

    .close-box {
      position: relative;
      z-index: 2;
      padding: 4px;
      margin-top: 20px;
      border-radius: 50%;
    }

    .hover {
      opacity: 0.7;
    }

    .click-box {
      position: absolute;
      bottom: 30px;
      left: 20px;
      z-index: 4;
      transform: rotateY(180deg);
      animation: bounce 0.5s infinite;
    }
  }

  @keyframes bounce {
    0%,
    100% {
      transform: rotateY(180deg) scale(1); /* 动画开始和结束时，手掌大小不变 */
    }

    50% {
      transform: rotateY(180deg) scale(1.1); /* 动画中间时刻，手掌放大10% */
    }
  }
</style>
